<template>
<div class="">
    <p>
        <span class="tit1">各等级养老服务设施数量分布</span>
    </p>
    <div ref="chart4" class='top20' style="width: 100%; height: 300px" />
</div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
    components: {},
    props: {},
    data() {
        return {
            chartData: {
                data1: ['一级服务设施', '二级服务设施', '三级服务设施','四级服务设施','五级服务设施'],
                data2: [{value: 22, name: '一级服务设施'},{value: 135, name: '二级服务设施'},{value: 22, name: '三级服务设施'},{value: 135, name: '四级服务设施'},{value: 22, name: '五级服务设施'}],
                data3: [],
            }
        }
    },
    computed: {},
    watch: {

    },
    created() {
        const t = this;
        
    },
    mounted() {
        const t = this;
        t.initChart();
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chart4, 'macarons')
            this.setOptions()
        },
        setOptions() {
            const t = this;
            this.chart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 20,
                    top: 100,
                    data: t.chartData.data1
                },
                color: ['#FFAE38','#FF5B50', '#56D756','#C38DFF','#4E7FE6'],
                series: [{
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['40%', '50%'],
                    data: t.chartData.data2,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            })
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
